<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .menu{
            width: 100%;
            display: flex;
            font-size: 40px;
            /*justify-content: flex-start;!*紧凑左对齐*!*/
            /*justify-content: flex-end;!*紧凑右对齐*!*/
            /*justify-content: center;!*紧凑居中对齐*!*/
            justify-content: space-between;
            justify-content: space-around;
            justify-content: space-evenly;
        }
        .menu li{
            list-style-type: none;
            text-align: center;
        }
    </style>
</head>
<body>
<ul class="menu">
    <li>菜单1</li>
    <li>菜单2</li>
    <li>菜单3</li>
    <li>菜单4</li>
    <li>菜单5</li>
</ul>
</body>
</html>